<template>
	<el-row class="IoSpeakingWriting-box">
		<el-col :span="24" class="IoSpeakingWriting-page">
			<div id="Ioread" class="linePage ScaleCSSViewport_unzoom" v-loading="loading"
				element-loading-spinner="el-icon-loading" element-loading-background="#021033"></div>
		</el-col>
		<el-col :span="24" class="IoSpeakingWriting-file">
			<span class="LoadFile">IO 读 ：{{ this.read ? this.read + " KB" : "0" + " KB" }}
			</span>
		</el-col>
	</el-row>
</template>>

<script>
	import {
		MySqlIoreadWrite
	} from "@/api/index.js";
	import bus from "common/bus.js";
	import {
		line,
		Line
	} from "@antv/g2plot";

	export default {
		data() {
			return {
				selectedMonID: "",
				timerName: "mysqlIoread",
				timerEventName: "mysqltimerIoread",
				timerInterval: 1000 * 30,
				lineItem: "",
				lineData: [],
				read: "",
				loading: "",
			};
		},
		created() {
			bus.$on("selectedMonIDMysql", (msg) => {

				this.resetData();

				this.selectedMonID = msg;
				// this.postData.filters.monid = this.selectedMonID.selectedOSMonID;
				// this.getData();

				this.initGetData()
			});

			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});
			bus.$on(this.timerEventName, msg => {
				if (msg.isGetData) {

					this.initGetData();
				}
			});
		},
		mounted() {
			this.initLine();
		},
		computed: {},
		methods: {
			initGetData() {

				// (this.loading = true),
				MySqlIoreadWrite({
						ip: this.selectedMonID.selectedIP,
						dbServername: this.selectedMonID.selectedDBNAME
					})
					.then((res) => {

						this.lineData = []

						res.forEach((item) => {
							// console.log(item.RecordTime)
							this.lineData.push({
								Date: item.RecordTime,
								scales: parseInt(item.innodbDataRead),
								category: "已读取总量(KB)",
							}, {
								Date: item.RecordTime,
								scales: parseInt(item.innodbDataReads),
								category: "数据读次数",
							});
						});




						if (res.length === 0) {
							this.read = 0

							this.lineItem.update({
								data: []
							});
						} else {
							this.read = parseInt(res[0].avgwrite);
							this.lineItem.changeData(this.lineData);
						}

					})
					.catch((_) => {})
					.finally((_) => {
						// this.loading = false;
					});
			},


			resetData() {
				this.lineData = [];
				this.read = ""
			},
			initLine() {
				// console.log(this.lineData)
				this.lineItem = new Line("Ioread", {
					data: this.lineData,
					padding: "auto",
					xField: "Date",
					yField: "scales",
					height: 145 * this.ZOOM,
					legend: false,
					seriesField: "category",
					color: ["#1979C9", "#D62A0D"],
					// color: '#a8ddb5',
					// xAxis: {
					//   // type: 'timeCat',
					//   tickCount: 30,
					// },
					// padding:20,
					xAxis: false,
					// yAxis: {
					//   grid: {
					//     line: {
					//       style: {
					//         stroke: "rgb(29, 140, 248)",
					//         lineWidth: 1,
					//         lineDash: [1, 2],
					//         strokeOpacity: 0.7,
					//         // shadowColor: "rgb(29, 140, 248)",
					//         shadowBlur: 10,
					//         shadowOffsetX: 5,
					//         shadowOffsetY: 5,
					//         cursor: "pointer",
					//       },
					//     },
					//   },
					// },

				});

				this.lineItem.render();
			},
		},
		beforeDestroy() {
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
			this.lineItem.destroy();
			// 移除selectedMonIDMysql 事件监听 避免事件累加
			bus.$off('selectedMonIDMysql')
		},
	};
</script>
<style scoped>
	.IoSpeakingWriting-box {
		height: 100%;
	}

	.IoSpeakingWriting-page {
		height: 72%;
		width: 100%;
	}

	.linePage {
		height: 100%;
		width: 100%;
	}

	.IoSpeakingWriting-file {
		height: 30%;
		width: 100%;
		text-align: center;
	}
</style>
